<template>
    <div class="addBrand_box">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="default"
            status-icon>
            <el-form-item label="品牌名称：" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="品牌首字母：">
                <el-input v-model="ruleForm.firstLetter" />
            </el-form-item>
            <el-form-item label="品牌LOGO：" prop="logo">
                <el-upload v-model:file-list="fileList" class="upload-demo"
                    action="http://120.24.64.5:8088/mall-admin/minio/upload" :on-success="handleSuccess"
                    :on-remove="handleRemove" list-type="picture" :limit="1">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌专区大图：">
                <el-upload v-model:file-list="fileList2" class="upload-demo"
                    action="http://120.24.64.5:8088/mall-admin/minio/upload" :on-success="handleSuccess2"
                    :on-remove="handleRemove2" list-type="picture">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌故事：">
                <el-input class="area_input" v-model="ruleForm.brandStory" type="textarea" palceholder="请输入内容" />
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-form-item label="是否显示：">
                <el-radio-group v-model="ruleForm.showStatus">
                    <el-radio :label="1">
                        <template #default>
                            是
                        </template>
                    </el-radio>
                    <el-radio :label="0">
                        <template #default>
                            否
                        </template>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="品牌制造商：">
                <el-radio-group v-model="ruleForm.factoryStatus">
                    <el-radio :label="1">
                        <template #default>
                            是
                        </template>
                    </el-radio>
                    <el-radio :label="0">
                        <template #default>
                            否
                        </template>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">
                    提交
                </el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang='ts'>
import { reactive, ref } from 'vue';
// @ts-ignore
import type { FormInstance, FormRules } from 'element-plus'
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'
// @ts-ignore
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ApiCreateBrand } from '@/http/api'

const ruleFormRef = ref<FormInstance>()
const initForm = {
    name: '',
    firstLetter: '',
    logo: '',
    bigPic: '',
    brandStory: '',
    sort: 0,
    showStatus: 0,
    factoryStatus: 0,
    id: 0
}
// const ruleForm = reactive({
//     name: '',
//     firstLetter: '',
//     logo: '',
//     bigPic: '',
//     brandStory: '',
//     sort: 0,
//     showStatus: 0,
//     factoryStatus: 0,
//     id: 0
// })
const ruleForm = reactive<ICreateBrandParams>({
    ...initForm
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入品牌名称', trigger: 'blur' },
        { min: 2, max: 140, message: '长度在2到140个字符', trigger: 'blur' },
    ],
    logo: [
        { required: true, message: '请输入品牌logo', trigger: 'blur' },
    ],
})

// 上传图片的数据
const fileList = ref<UploadUserFile[]>([
])
const fileList2 = ref<UploadUserFile[]>([
])
// 操作图片文件的一些钩子函数
const handleRemove: UploadProps['onRemove'] = () => {
    console.log('移除品牌logo图片')
    ruleForm.logo = ''

}

const handleSuccess: UploadProps['onPreview'] = () => {
    console.log('品牌logo上传成功')
    console.log(fileList.value[0].response.data.url);
    ruleForm.logo = fileList.value[0].response.data.url

}
const handleRemove2: UploadProps['onRemove'] = () => {
    console.log('移除品牌专区大图')
    ruleForm.bigPic = ''
}

const handleSuccess2: UploadProps['onPreview'] = () => {
    console.log('品牌专区大图上传成功')
    ruleForm.bigPic = fileList2.value[0].response.data.url
}


// 提交事件
const addBrand = () => {
    ElMessageBox.confirm('是否提交数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        ApiCreateBrand(ruleForm).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '添加成功'
                })
                // 清空表单
                Object.assign(ruleForm, initForm)
                // 清除图片
                fileList.value = []
                fileList2.value = []
            }
        })
    }).catch(() => { })

}

// 重置事件
const resetForm = () => {
    // 清空表单
    Object.assign(ruleForm, initForm)
    // 清除图片
    fileList.value = []
    fileList2.value = []
}

</script>
<style lang="less" scoped>
.addBrand_box {
    width: 792px;
    border: 1px solid #ebeef5;
    padding: 65px;
    margin: 0 auto;
    box-sizing: border-box;

    .el-upload__tip {
        font-size: 12px;
        color: #606266;
        margin-top: 7px;
    }

    .el-form-item {
        padding: 5px 0;

        .el-input {
            height: 40px;
        }

    }

}
</style>